<template>
    <div class="container-announ-detail">
        <a-modal width="1300px" :visible="visible" title="信息详情" @cancel="closeModal" class="yuan-modal announ-detail"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="loading">
                <div class="yuan-form" v-if="detailInfo">
                    <div class="form-panel">
                        <div class="form-title">需求信息</div>
                        <div class="detail-info">
                            <div class="detail-imgbox">
                                <img class="detail-img" :src="detailInfo.demandCoverImageUrl" />
                            </div>
                            <div class="detail-right">
                                <div class="detail-info-title">
                                    <div>{{detailInfo.demandName}}</div>
                                    <div class="detail-link c-primary" @click="jumpDemand">查看全部</div>
                                </div>
                                <div>
                                    <span class="type-danger"
                                        v-if="detailInfo.demandInvestmentMin">预计投入金额：{{detailInfo.demandInvestmentMin}}-{{detailInfo.demandInvestmentMax}}万元</span>
                                    <span class="type-primary"
                                        v-if="detailInfo.demandDeadline">剩余天数：{{deadlineDay(detailInfo.demandDeadline)}}天</span>
                                </div>
                                <div class="detail-info-box">
                                    <div class="detail-info-list">
                                        <span class="detail-l-title">企业（单位）名称：</span>
                                        <span class="detail-l-word">{{detailInfo.demandCompanyName}}</span>
                                    </div>
                                    <div class="detail-info-list">
                                        <span class="detail-l-title">分类：</span>
                                        <span class="detail-l-word">{{detailInfo.demandCategory}}</span>
                                    </div>
                                    <div class="detail-info-list">
                                        <span class="detail-l-title">细分领域：</span>
                                        <span
                                            class="detail-l-word">{{detailInfo.demandSubCategory?JSON.parse(detailInfo.demandSubCategory).join(','):''}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-title">成果信息</div>
                        <div class="detail-info">
                            <div class="detail-imgbox">
                                <img class="detail-img" :src="detailInfo.achievementCoverPicture" />
                            </div>
                            <div class="detail-right">
                                <div class="detail-info-title">
                                    <div>{{detailInfo.achievementName}}</div>
                                    <div class="detail-link c-primary" @click="jumpAch">查看全部</div>
                                </div>
                                <div class="detail-info-box">
                                    <div class="detail-info-list">
                                        <span class="detail-l-title">成果负责人：</span>
                                        <span class="detail-l-word">{{detailInfo.achievementPrincipal}}</span>
                                    </div>
                                </div>
                                <div class="detail-info-box">
                                    <div class="detail-info-list">
                                        <span class="detail-l-title">成果类别：</span>
                                        <span class="detail-l-word">{{detailInfo.achievementCategory}}</span>
                                    </div>
                                    <div class="detail-info-list">
                                        <span class="detail-l-title">成果年份：</span>
                                        <span class="detail-l-word">{{detailInfo.achievementYear}}</span>
                                    </div>
                                    <div class="detail-info-list">
                                        <span class="detail-l-title">所属技术类别：</span>
                                        <span class="detail-l-word">
                                            {{detailInfo.achievementBelongToTechnologyCategory?JSON.parse(detailInfo.achievementBelongToTechnologyCategory).join(','):''}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="yuan-form" v-if="detailInfo.achievementId">
                    <div class="form-panel">
                        <div class="form-title">对接详情</div>

                        <div>
                            <div class="pross-list" v-for="item in detailInfo.auditData.recordList">
                                <div class="pross-left">
                                    <div>{{item.stepName}}</div>
                                    <div>{{item.executionTime}}</div>
                                </div>
                                <div class="pross-right">
                                    <div class="pross-r-role">
                                        {{item.role}}：
                                    </div>
                                    <div class="pross-r-content">
                                        <div class="pross-r-title">
                                            {{item.role==='成果方'?detailInfo.achievementPrincipal:detailInfo.demandCompanyName}}
                                        </div>

                                        <template v-if="item.artisanBrokerInfo">
                                            <div class="pross-r-user" v-for="broker in JSON.parse(item.artisanBrokerInfo)">
                                                <span class="p-r-user-words">技术经纪人：{{broker.technicalRepresentative}}</span>
                                                <span class="p-r-user-words"
                                                    style="margin-left:20px">联系方式：{{broker.technicalPhone}}</span>
                                                <span class="auth-type">已认证</span>
                                            </div>
                                        </template>

                                        <!-- <div class="pross-r-user">
                                            <img class="p-r-user-img" :src="item.headPortrait" />
                                            <span class="p-r-user-words">技术经纪人：{{item.artisanBroker}}</span>
                                            <span class="auth-type">已认证</span>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a-spin>
            <template slot="footer">
                <a-button @click="closeModal">
                    关闭
                </a-button>
            </template>
        </a-modal>

    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import config from "@/utils/config";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
@Component({
    name: "dom",
    components: {},
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) detailId!: string;
    @Prop({ default: "" }) publicityType!: string;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.getDetailInfo();
        }
    }
    loading = false;
    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }
    async modalOk() {
        this.loading = true;
        try {
            // const res = await warningApi.planAdd(this.sureInfo);
            // this.$message.success(res.msg);
            this.closeModal();
        } finally {
            this.loading = false;
        }
    }

    detailInfo: any = {};
    async getDetailInfo() {
        this.loading = true;
        try {
            const res = await api.getAnMentDetail({ id: this.detailId,publicityType:this.publicityType });
            this.detailInfo = res.data;
        } finally {
            this.loading = false;
        }
    }
    deadlineDay(deadLine) {
        if (!deadLine) return "";
        const nowTime = new Date().getTime();
        const deadlineTime = new Date(deadLine.replace(/-/g, "/")).getTime();
        const day = (deadlineTime - nowTime) / (24 * 60 * 60 * 1000);
        return Math.ceil(day) >= 0 ? Math.ceil(day) : '已过期';
    }
    jumpDemand() {
        window.open(config.clientUrl + "/#/demandDetail?id=" + this.detailInfo.demandId);
    }
    jumpAch() {
        window.open(config.clientUrl + "/#/achievementDetail?id=" + this.detailInfo.achievementId);
    }
}
</script>

<style lang="scss">
.announ-detail {
    .detail-info {
        display: flex;
        align-items: center;
        background-color: #f7f7f7;
        padding: 15px;
    }
    .detail-right {
        flex-grow: 1;
        padding: 0 15px;
    }
    .detail-info-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        color: #333;
        border-bottom: solid 1px #d0d0d0;
        padding: 4px 0;
        margin-bottom: 10px;
    }
    .detail-imgbox {
        width: 240px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .detail-img {
        max-width: 100%;
        max-height: 100%;
    }

    .detail-link {
        font-size: 16px;
        cursor: pointer;
    }
    .detail-info-box {
        display: flex;
        margin-top: 20px;
    }
    .detail-info-list {
        margin-right: 30px;
        font-size: 14px;
    }
    .detail-info-list:last-child {
        margin-right: 0px;
    }
    .detail-l-title {
        color: #999;
    }

    .pross-list {
        display: flex;
        min-height: 120px;
    }
    .pross-left {
        width: 220px;
        padding: 0 15px;
        text-align: center;
    }
    .pross-right {
        padding: 0 15px 15px 15px;
        display: flex;
        position: relative;
    }
    .pross-right::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background-color: #04d167;
        position: absolute;
        top: 6px;
        left: -4px;
        z-index: 1;
    }
    .pross-right::after {
        content: "";
        width: 1px;
        height: 100%;
        border-left: solid 1px #04d167;
        position: absolute;
        top: 6px;
        left: -1px;
        z-index: 1;
    }
    .pross-list:last-child .pross-right::after {
        border-left: unset;
    }
    .pross-r-role {
        color: #999;
    }
    .pross-r-user {
        margin-top: 10px;
        display: flex;
        align-items: center;
    }
    .p-r-user-img {
        width: 38px;
        height: 38px;
        border-radius: 40px;
    }
    .auth-type {
        font-size: 12px;
        color: #fff;
        background-color: #ffd706;
        padding: 2px 8px;
        border-radius: 30px;
        margin-left: 10px;
    }
    .p-r-user-words {
        // margin-left: 10px;
    }
}
</style>
